<template>
<div class="thumb-list">
  <div class="list-opt d-flex justify-content-end align-items-center" :class="{active: chosedItems.length}">
    <i class="material-icons btn text-primary btn-sm" :class="{'mr-auto': chosedItems.length != 1}" @click.prevent="itemView" data-toggle="tooltip" data-placement="top" title="浏览图片" v-tooltip v-if="list.length">image</i>
    <i class="material-icons btn text-info btn-sm mr-auto" @click="$emit('rename', chosedItems[0])" data-toggle="tooltip" data-placement="top" title="重命名" v-tooltip v-if="chosedItems.length==1">edit</i>
    <div v-show="chosedItems.length">
      <i class="mr-1 material-icons btn btn-outline-danger btn-sm" @click="$emit('remove', chosedItems)" data-toggle="tooltip" data-placement="top" title="从当前分类移除" v-tooltip>remove</i>
      <i class="mr-1 material-icons btn btn-outline-danger btn-sm" @click="$emit('removeFromTag', chosedItems)" data-toggle="tooltip" data-placement="top" title="从标签中移除" v-tooltip>bookmark_border</i>
      <i class="mr-1 material-icons btn btn-outline-info btn-sm" @click="$emit('addToTag', chosedItems)" data-toggle="tooltip" data-placement="top" title="添加标签" v-tooltip>bookmarks</i>
      <i class="mr-1 material-icons btn btn-outline-info btn-sm" @click="$emit('addToDirectory', chosedItems)" data-toggle="tooltip" data-placement="top" title="添加到分类" v-tooltip>folder_open</i>
    </div>
  </div>
  <div class="list-container">
    <transition-group
      tag='div'
      class="list"
      :style="thumbListStyle"
      v-bind:css="false"
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
      >
      <div :style="thumbItemStyle(index)"
        :class="{active: activeItems[index]}"
        v-for='(img, index) of list' class="thumb-item" :key="img._id">
      <thumb-img :size="thumbItemSize" :image="img" :key="img._id" @smart-click="itemClick(img, index, arguments)"></thumb-img>
      <div class="item-choose text-info">
        <i class="material-icons d-inline-block" @click.prevent="itemOpen(img, index)" data-toggle="tooltip" data-placement="bottom" title="浏览该图" v-tooltip>image</i>
      </div>
    </div>
    
  </transition-group>
  </div>
</div>
</template>
<script type="text/javascript">
import thumbImg from "./thumb-img"
import Scrollbar from 'smooth-scrollbar'
import _ from "lodash"
import $ from "jquery"

export default
{
    components: {
        thumbImg
    },
    props: {
        list: {
            type: Array,
            required: true
        },
        spacing: {
            type: Number,
            default: 8
        }
    },
    data() {
        return {
            windowSize: 0,
            activeItems: {}
        }
    },
    computed: {
        chosedItems() {
          var arr = [];
          for (var i in this.activeItems) {
            this.activeItems[i] && arr.push(this.list[i]);
          }
          return arr;
        },
        thumbItemSize() {
          return Math.max(Math.min(this.listSize / 3 - this.spacing * 2, 100), 80);
        },
        thumbListSpace() {
          var curWidth = this.numsInLine * this.thumbItemSize + (this.numsInLine - 1) * this.spacing;
          return this.listSize - curWidth;
        },
        listSize() {
          this.windowSize;
          return this.$el ? $(this.$el).innerWidth() : this.windowSize;
        },
        numsInLine() {
          var curWidth = this.listSize, itemSize = this.thumbItemSize,
              spacing = this.spacing;
          return parseInt((curWidth + spacing) / (itemSize + spacing));
        },
        numsInRow() {
          return parseInt(this.list.length / this.numsInLine) + !!(this.list.length % this.numsInLine);
        },
        thumbListStyle() {
          return {
            marginLeft: `${this.thumbListSpace / 2}px`,
            marginRight: `${this.thumbListSpace / 2}px`,
            position: 'relative',
            width: 'atuo',
            height: this.numsInRow * (this.thumbItemSize + this.spacing) - this.spacing + 'px'
          }
        }
    },
    methods: {
        isElInView(el) {
          var rect = el.getBoundingClientRect();
          return (rect.top < window.innerHeight && rect.bottom > 0) &&
                 (rect.left < window.innerWidth && rect.right > 0)
        },
        beforeEnter(el) {
          var vm = this;
          $(el).css('opacity', 0);
        },
        enter(el, done) {
          var vm = this;
          if (vm.isElInView(el)) {
            $(el).animate({
              'opacity': 1
            }, 500, done);
            
          } else {
            $(el).css('opacity', 1);
            done();
          }
        },
        leave(el, done) {
          var vm = this;
          if (vm.isElInView(el)) {
            $(el).animate({
              'opacity': 0
            }, 500, done);
          } else {
            done();
          }
        },
        itemClick(img, index, args) {
          var vm = this, e = args[0];
          if (e.ctrlKey) {
            vm.$set(vm.activeItems, index, !vm.activeItems[index]);
          } else if (e.shiftKey) {
            for (var i = index - 1; i >= 0; i--) {
              if (vm.activeItems[i]) {
                break;
              }
            }
            for (var j = i + 1; j <= index; j++) {
              vm.$set(vm.activeItems, j, true);
            }
          } else {
            vm.activeItems = {
              [index]: !vm.activeItems[index]
            };
          }
        },
        itemView() {
          var vm = this;
          var target = vm.chosedItems.length ? vm.chosedItems[0] : vm.list[0];
          var index = vm.list.indexOf(target);
          vm.itemOpen(target, index);
        },
        itemOpen(img, index) {
          var vm = this;
          this.$emit('item-view', img, index);
        },
        thumbItemStyle(index) {
          var {numsInLine, thumbItemSize, spacing} = this;
          var x = index % numsInLine,
              y = parseInt(index / numsInLine);
          return {
            width: thumbItemSize + 'px',
            height: thumbItemSize + 'px',
            position: 'absolute',
            top: y * thumbItemSize + (y * spacing) + 'px',
            left: x * thumbItemSize + (x * spacing) + 'px',
          }
        }
    },
    watch: {
      list() {
        this.activeItems = {};
      }
    },
    mounted() {
        var vm = this;
        Scrollbar.init($(vm.$el).children('.list-container')[0]);
        vm.windowSize = window.innerWidth;
        $(window).on('resize.cmp' + vm._uid, _.debounce(function(e) {
          console.log(e);
          vm.windowSize = window.innerWidth;
        }, 250, { 'maxWait': 1000 }));
    },
    destroyed() {
        var vm = this;
        $(window).off('resize.cmp' + vm._uid);
        Scrollbar.destroy($(vm.$el).children('.list-container')[0]);
    }
}
</script>
<style type="text/css">
.thumb-list {
  overflow: hidden;
}

.thumb-list,
.list-container,
.list-container .list {
  position: relative;
  text-align: left;
  padding: 0;
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
      -ms-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
  user-select: none;
}

.thumb-list .list-container .thumb-item {
    -webkit-transition: transform .3s linear;
       -moz-transition: transform .3s linear;
        -ms-transition: transform .3s linear;
         -o-transition: transform .3s linear;
            transition: transform .3s linear;
}

.thumb-list .list-container .thumb-item {
  width: 150px;
  height: 150px;
  overflow: hidden;
  display: inline-block;
  border-radius: 5px;
  box-shadow: 0 3px 10px #6f6f6f;
  cursor: pointer;
}

.thumb-list .list-container .thumb-item.active {
  box-shadow: 0 0 5px 3px #28a645;
}

.thumb-list .list-container .thumb-item .item-choose {
  display: none;
}

.thumb-list .list-container .thumb-item.active .item-choose {
  display: block;
  position: absolute;
  top: 0;
  right: 0;

}

.thumb-list .list-opt {
  margin-top: -3em;
  margin-bottom: .5em;
  overflow: hidden;
  -webkit-transition: margin-top .5s .3s;
  -o-transition: margin-top .5s .3s;
  transition: margin-top .5s .3s;
}

.thumb-list .list-opt,
.thumb-list .list-opt.active {
  margin-top: 0;
  height: 3em;
  margin-bottom: 0;
}

</style>